<!--
 * @Descripttion:交班账单表格组件
-->
<template>
  <div>
    <div class="handover-table-wrap">
      <div class="table-box">
        <el-table
          :data="tableData"
          border
          @row-click="handleRowClick"
          :height="375"
          table-layout="fixed"
        >
          <el-table-column label="" width="50" align="center">
            <template #default="scope">
              <el-radio v-model="templateSelection" :label="scope.row.shift_id"> &nbsp; </el-radio>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="shift_id" label="交班单号" show-overflow-tooltip />
          <el-table-column align="center" prop="clerkName" label="交班人" show-overflow-tooltip />
          <el-table-column
            align="center"
            prop="start_time"
            label="开班时间"
            show-overflow-tooltip
          />
          <el-table-column align="center" prop="end_time" label="交班时间" show-overflow-tooltip />
          <el-table-column align="center" prop="bill_count" label="账单数" show-overflow-tooltip />
          <el-table-column
            align="center"
            prop="avg_bill_amount"
            label="单均消费（元）"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            prop="customer_count"
            label="消费人数"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            prop="avg_customer_amount"
            label="人均消费（元）"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            prop="total_amount"
            label="实收总金额（元）"
            show-overflow-tooltip
          />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

interface Props {
  tableData: any[]
  selectedRow?: any
}

const props = withDefaults(defineProps<Props>(), {
  tableData: () => [],
  selectedRow: null
})

const emit = defineEmits(['row-select'])

// 选中当行表格数据
const templateSelection = ref('')

// 处理行点击
const handleRowClick = (row: any) => {
  templateSelection.value = row.shift_id
  emit('row-select', row)
}

// 监听选中行变化
watch(
  () => props.selectedRow,
  newVal => {
    if (!newVal) {
      templateSelection.value = ''
    } else {
      templateSelection.value = newVal.shift_id
    }
  },
  { immediate: true }
)
</script>

<style lang="scss" scoped>
:deep(.el-table) {
  border-radius: 12px;

  .el-table__body-wrapper {
    // max-height: 360px;
    overflow-y: auto;

    //滚动条整体的大小
    &::-webkit-scrollbar {
      width: 6px !important;
      height: 0 !important;
    }
    //滚动条里滑动的滑块
    &::-webkit-scrollbar-thumb {
      height: 200px !important;
      background: #d2d2d2 !important;
      border-radius: 3px !important;
    }
    //滚动条底层样式
    &::-webkit-scrollbar-track {
      display: none !important;
    }
  }

  .el-table th.el-table__cell {
    background: #a85b62;
    color: #fff !important;
  }

  .el-input__inner {
    border-radius: 12px;
  }

  //单选框选中的颜色
  .el-radio__input.is-checked .el-radio__inner {
    border-color: #7c0a03;
    background: #7c0a03;
  }
}

.handover-table-wrap {
  width: 100%;
  background: #fff;
  border-radius: 0px 0px 0px 20px;
  box-sizing: border-box;
}

.table-box {
  width: 100%;
  height: 380px;
  border-radius: 12px;
}
</style>
